var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
define(["require", "exports", "admin/application", "admin/services/user", "react", "react-dom"], function (require, exports, application_1, user_1, React, ReactDOM) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    function default_1(page) {
        let service = page.createService(user_1.UserService);
        let roleId = page.data.roleId;
        console.assert(roleId != null);
        class RolePage extends React.Component {
            constructor(props) {
                super(props);
                this.state = { resources: null };
            }
            componentDidMount() {
                service.allResources().then(items => {
                    this.setState({ resources: items });
                });
                Promise.all([service.getRole(roleId), service.roleResources(roleId), service.allResources()])
                    .then(args => {
                    let role = args[0];
                    let roleResources = args[1];
                    let resources = args[2];
                    for (let i = 0; i < roleResources.length; i++) {
                        let resource = resources.filter(o => o.id == roleResources[i].resource_id)[0];
                        if (resource) {
                            resource.selected = true;
                        }
                    }
                    this.setState({ role, resources });
                });
            }
            isSelectedAll() {
                let resources = this.state.resources || [];
                let selectedChildren = resources.filter(o => o.selected == true);
                let result = selectedChildren.length == resources.length;
                return result;
            }
            checkAll(isSelect) {
                let resources = this.state.resources || [];
                resources.forEach(item => {
                    item.selected = isSelect;
                });
                this.setState({ resources });
            }
            isSelectedAllChild(resourceId) {
                let resources = this.state.resources || [];
                let children = resources.filter(o => o.parent_id == resourceId);
                let selectedChildren = children.filter(o => o.selected == true);
                let result = selectedChildren.length == children.length;
                return result;
            }
            checkAllChild(resourceId, isSelect) {
                let resources = this.state.resources || [];
                resources.filter(o => o.parent_id == resourceId)
                    .forEach(o => {
                    o.selected = isSelect;
                });
                this.setState({ resources });
            }
            checkItem(resourceId, isSelect) {
                let resources = this.state.resources || [];
                let item = resources.filter(o => o.id == resourceId)[0];
                console.assert(item != null);
                item.selected = isSelect;
                this.setState({ resources });
            }
            save() {
                return __awaiter(this, void 0, void 0, function* () {
                    // app.createService()
                    let resourceIds = this.state.resources.filter(o => o.selected).map(o => o.id);
                    return service.setResources(roleId, resourceIds);
                });
            }
            render() {
                let resources = this.state.resources || [];
                let role = this.state.role;
                let topResources = resources.filter(o => o.parent_id == null);
                return [
                    h("ul", { key: 10, className: "nav nav-tabs clearfix" },
                        h("li", { className: "pull-right" },
                            h("button", { className: "btn btn-primary btn-sm", onClick: () => application_1.default.back() },
                                h("i", { className: "icon-reply" }),
                                h("span", null, "\u8FD4\u56DE"))),
                        h("li", { className: "pull-right" },
                            h("button", { className: "btn btn-primary btn-sm", ref: e => {
                                    ui.buttonOnClick(e, () => this.save(), {
                                        toast: '保存成功'
                                    });
                                } },
                                h("i", { className: "icon-save" }),
                                h("span", null, "\u4FDD\u5B58")))),
                    h("div", { key: 20, className: "well" },
                        h("div", { className: "row form-group" },
                            h("label", { className: "col-md-4", style: { width: label_max_width } }, "\u540D\u79F0"),
                            h("div", { className: "col-md-8", style: { maxWidth: input_max_width } },
                                h("input", { type: "text", className: "form-control", value: role ? role.name : '' }))),
                        h("div", { className: "row form-group" },
                            h("label", { className: "col-md-4", style: { width: label_max_width } }, "\u5907\u6CE8"),
                            h("div", { className: "col-md-8", style: { maxWidth: input_max_width } },
                                h("textarea", { className: "form-control" }))),
                        h("div", { className: "row form-group" },
                            h("label", { className: "col-md-4", style: { width: label_max_width } }, "\u6743\u9650"),
                            h("div", { className: "col-md-8" },
                                h("div", { className: "list-group" }, topResources.map(item => h(React.Fragment, { key: item.id },
                                    h("div", { className: "list-group-item" },
                                        h("h4", { className: "list-group-item-heading" },
                                            h("input", { type: "checkbox", checked: this.isSelectedAllChild(item.id), onChange: e => this.checkAllChild(item.id, e.target.checked) }),
                                            h("span", { style: { paddingLeft: 4 } }, item.name)),
                                        h("div", { className: "list-group-item-text clearfix" }, resources.filter(o => o.parent_id == item.id).map(child => h("div", { key: child.id, className: "col-lg-2", style: { padding: 0, margin: 0, marginTop: 8 } },
                                            h("div", null,
                                                h("input", { type: "checkbox", checked: child.selected || false, onChange: e => {
                                                        this.checkItem(child.id, e.target.checked);
                                                    } }),
                                                h("span", { style: { paddingLeft: 4 } }, child.name))))))))),
                                h("label", null,
                                    h("input", { type: "checkbox", checked: this.isSelectedAll(), onChange: e => {
                                            this.checkAll(e.target.checked);
                                        } }),
                                    " \u5168\u9009"))))
                ];
            }
        }
        ReactDOM.render(h(RolePage, null), page.element);
        application_1.default.loadCSS(page.name);
    }
    exports.default = default_1;
    const label_max_width = 80;
    const input_max_width = 300;
});
// {menuData.filter(o => o.visible != false).map(o => [
//     <div key={o.title} className="row form-group">
//         <label className="col-md-4" style={{ width: label_max_width }} />
//         <label className="col-md-8" style={{ maxWidth: input_max_width }}>
//             <input type="checkbox" />
//             <span>{o.title}</span>
//         </label>
//     </div>,
//     ...o.children.filter(o => o.visible != false).map(o => [
//         <div key={o.title} className="row form-group">
//             <label className="col-md-4" style={{ width: label_max_width }} />
//             <label className="col-md-8 level1" style={{ maxWidth: input_max_width }}>
//                 <input type="checkbox" />
//                 <span>{o.title}</span>
//             </label>
//         </div>,
//         ...o.children.filter(o => o.visible != false).map(o => [
//             <div key={o.title} className="row form-group">
//                 <label className="col-md-4" style={{ width: label_max_width }} />
//                 <label className="col-md-8 level2" style={{ maxWidth: input_max_width }}>
//                     <input type="checkbox" />
//                     <span>{o.title}</span>
//                 </label>
//             </div>,
//         ])
//     ])
// ])}
